<template>
  <div class="goods-detail">
    <div class="goods-title">商品详情</div>
    <div class="goods-top">
      <div class="banner-wrapper">
        <a-carousel arrows autoplay>
          <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>
          <div v-for="item in data.pic" :key="item.pic" class="pic-wrapper">
            <img :src="item.pic" />
          </div>
        </a-carousel>
      </div>

      <div class="right-wrapper">
        <div class="title-wrapper">
          <div class="title">{{ data.title }}</div>
          <span class="s-title">{{ data.sTitle }}</span>
          <div class="sub-title">
            <a-tag color="#87d068">
              支持项目信用
            </a-tag>
          </div>
        </div>

        <div class="detail-wrapper">
          <div class="desc-wrapper">
            <div class="desc-item">
              <div class="desc-label">行业</div>
              <div class="desc-value">{{ data.c_work_info.name }}</div>
            </div>
            <div class="desc-item">
              <div class="desc-label">品类名</div>
              <div class="desc-value">{{ data.c_product_info.name }}</div>
            </div>
            <div class="desc-item">
              <div class="desc-label">品牌或商家</div>
              <div class="desc-value">{{ data.brand }}</div>
            </div>

            <div class="desc-item">
              <div class="desc-label">规格或型号</div>
              <div class="desc-value">
                {{ data.norms }}
              </div>
            </div>

            <div class="desc-item">
              <div class="desc-label">质量等级</div>
              <div class="desc-value">
                {{ data.quality }}
              </div>
            </div>

            <div class="desc-item">
              <div class="desc-label">仓库信息</div>
              <div class="desc-value">
                {{ data.stock }}
              </div>
            </div>

            <div class="desc-item">
              <div class="desc-label">质保书</div>
              <div class="desc-value">
                {{ data.isQa ? "有质保书" : "无质保书" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="goods-bottom">
      <div v-html="data.content"></div>
    </div>
  </div>
</template>

<script>
import storage from "@/utils/storage";

export default {
  data() {
    return {
      data: storage.getItem("GOODS_ITEM") || {}
    };
  },
  methods: {
    getImgUrl(i) {
      return this.data.pic[i].pic;
    }
  }
};
</script>

<style lang="less" scoped>
.goods-detail {
  background: @white;
  padding: 20px 40px;

  .goods-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .goods-top {
    display: flex;
    padding-bottom: 8px;

    .banner-wrapper {
      width: 440px;
      height: 440px;
      padding-bottom: 80px;
      border: 1px solid @border-color;
      flex-shrink: 0;
      border-radius: 4px;
      overflow: hidden;

      img {
        display: block;
        border-radius: 4px;
        margin: auto;
        width: 440px;
        height: 440px;
        object-fit: cover;
      }
    }

    .right-wrapper {
      padding: 24px 40px;

      .title-wrapper {
        padding-bottom: 24px;
        border-bottom: 1px dashed @text-color-3;
        .title {
          font-size: 32px;
          font-weight: bold;
          .ellipsis();
        }

        .s-title {
          color: @text-color-2;
          margin-top: 16px;
          font-size: 16px;
        }

        .sub-title {
          margin-top: 12px;
          .tag {
            color: @white;
            color: @primary-color;
          }
        }
      }

      .detail-wrapper {
        margin-top: 12px;
      }
      .desc-wrapper {
        padding: 10px 0;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        background: @white;

        .desc-item {
          display: flex;
          width: 50%;
          font-size: 15px;
          padding: 12px 10px;

          .desc-label {
            width: 108px;
            color: @text-color-2;
          }

          .desc-value {
            width: 200px;
          }
        }
      }
    }
  }

  .goods-bottom {
    padding: 24px 8px 12px;
  }

  /deep/.ant-carousel .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: @black;
    background-color: @white;
    opacity: 0.3;
    border-radius: 100px;
  }
  /deep/.ant-carousel .custom-slick-arrow:before {
    display: none;
  }
  /deep/.ant-carousel .custom-slick-arrow:hover {
    opacity: 0.5;
  }
}
</style>
